<template>
  <div class="f-header">
    <span class="logo">
      <el-icon class="mr-1"><eleme-filled /></el-icon>
      zhj编程
    </span>
    <el-icon class="icon-btn" @click="$store.commit('handleAsideWidth')">
      <fold v-if="$store.state.asideWidth == '250px'"/>
      <Expand v-else />
    </el-icon>
    <el-tooltip effect="dark" content="刷新" placement="bottom">
      <el-icon class="icon-btn" @click="handleRefresh"><refresh /></el-icon>
    </el-tooltip>

    
    <div class="ml-auto flex items-center">
      <el-tooltip effect="dark" content="全屏" placement="bottom">
        <el-icon class="icon-btn" @click="toggle">
          <full-screen v-if="!isFullscreen"/>
          <aim v-else />
        </el-icon>
    </el-tooltip>
      
      <el-dropdown class="dropdown" @command="handleCommand">
      <span class="flex items-center text-light-50">
        <el-avatar class="mr-2" :size="40" :src="$store.state.user.avatar" />
        {{ store.state.user.username }}
     
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        
        </el-dropdown-menu>
      </template>
    </el-dropdown>  
    </div>
    
  

  <!-- <el-drawer 
  v-model="showDrawer" 
  title="修改密码"
  size="45%"
  :close-on-click-modal="false"
  >
    <span>Hi there!</span>
    <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" size="small">
      <el-form-item prop="oldpassword" label="旧密码">
        <el-input v-model="form.oldpassword" show-password placeholder="请输入旧密码" >
        </el-input>
      </el-form-item>
      <el-form-item prop="password" label="新密码">
        <el-input type="password" show-password v-model="form.password" placeholder="请输入新密码" >
        </el-input>  
      </el-form-item>
      <el-form-item prop="repassword" label="确认密码">
        <el-input type="repassword" show-password v-model="form.repassword" placeholder="请确认密码" >
        </el-input>  
      </el-form-item>
      
     <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button>
     </el-form-item>
    </el-form>
  </el-drawer> -->

</div>
<form-drawer ref="formDrawerRef" title="修改密码" destroyOnClose @submit="onSubmit">
  <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" size="small">
      <el-form-item prop="oldpassword" label="旧密码">
        <el-input v-model="form.oldpassword" show-password placeholder="请输入旧密码" >
        </el-input>
      </el-form-item>
      <el-form-item prop="password" label="新密码">
        <el-input type="password" show-password v-model="form.password" placeholder="请输入新密码" >
        </el-input>  
      </el-form-item>
      <el-form-item prop="repassword" label="确认密码">
        <el-input type="repassword" show-password v-model="form.repassword" placeholder="请确认密码" >
        </el-input>  
      </el-form-item>
      
     <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button>
     </el-form-item>
    </el-form>
</form-drawer>

</template>

<script setup>
import {showModal,toast} from '~/composables/util'
import {logout,updatePassword} from '~/api/manager'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { useFullscreen } from '@vueuse/core'
import { ref,reactive } from 'vue'
import FormDrawer from '~/components/FormDrawer.vue'
const formDrawerRef = ref(null)
const showDrawer = ref(false)
const { 
  // 是否全屏
  isFullscreen,
  // 切换全屏
  toggle 
} = useFullscreen()

const router = useRouter()
const store = useStore()


const form = reactive({
  oldpassword: '',
  password: '',
  repassword: ''
   
  })

  const rules={
    oldpassword:[
      {required:true,message:'旧密码不能为空',trigger:'blur'},
     
    ],
    password:[
      {required:true,message:'新密码不能为空',trigger:'blur'}
    ],
    repassword:[
      {required:true,message:'确认密码不能为空',trigger:'blur'}
    ]
  }
  const formRef = ref(null)
  const loading = ref(false)

  const onSubmit = () => {
    formRef.value.validate((valid) => {
      // console.log(valid)
      if (!valid){
        return false        
      }
      loading.value = true   
      updatePassword(form)
      .then(res=>{
        console.log(res)
        toast(res.data.msg,res.data.type)

        if (res.data.code == 2000) {
          toast(res.data.msg,res.data.type)
          store.dispatch('logout')
          // 跳转回登录页
          router.push('/login')
        }
       
      }).finally(()=>{
        loading.value = false
      }
      )
    })    
  }





const handleCommand = (command) => {
  // console.log(command);
  switch (command) {
    case 'rePassword':
      // showDrawer.value = true
      formDrawerRef.value.open()
      break
    case 'logout':
      handleLogout()
      break
    default:
      break
  }
}

function handleLogout() {
  showModal('是否退出登录?')
    .then(res => {
      logout()
    .finally(() => {
      store.dispatch('logout')
      // 跳转回登录页
      router.push('/login')
      // 提示退出登录成功
      toast('退出登录成功')
    })
  })
}

// 刷新
// function handleRefresh(){
//   location.reload()
// }

// 也可以这样写
const handleRefresh=()=>location.reload()
</script>

<style scoped>
.f-header{
  @apply flex items-center bg-indigo-700 text-light-50 fixed top-0 left-0 right-0;
  height: 64px;
  z-index: 1000;
}

.logo{
  width: 250px;
  @apply flex justify-center items-center text-xl font-thin;
}

.icon-btn{
  @apply flex justify-center items-center;
  width: 42px;
  height: 64px;
  cursor: pointer;
}

.icon-btn:hover{
  @apply bg-indigo-600;
}

.f-header .dropdown{
  height: 64px;
  cursor: pointer;
  @apply flex justify-center items-center mx-5;
}
</style>